<template>
  <el-popover
    placement="left-start"
    width="50"
    trigger="hover"
    popper-class="sizechange"
  >
    <el-dropdown-item v-for="item of sizeOptions" :key="item.value" :disabled="size===item.value">
      <span @click="handleSetSize(item.value)">{{ item.label }}</span>
    </el-dropdown-item>
    <div slot="reference" class="fontsize">
      <svg-icon class-name="size-icon" icon-class="budget_font_size" />
      <span class="mlpx">字体大小</span>
    </div>

  </el-popover></template>

<script>
export default {
  data() {
    return {
      sizeOptions: [
        { label: '大', value: 'medium' },
        { label: '中', value: 'small' },
        { label: '小', value: 'mini' }
      ]
    }
  },
  computed: {
    size() {
      return this.$store.getters.size
    }
  },
  methods: {
    handleSetSize(size) {
      this.$ELEMENT.size = size
      this.$store.dispatch('app/setSize', size)
      this.refreshView()
      this.$message({
        message: '切换字体成功',
        type: 'success'
      })
    },
    refreshView() {
      // In order to make the cached page re-rendered
      this.$store.dispatch('tagsView/delAllCachedViews', this.$route)
      this.$store.dispatch('tagsView/delAllCachedObj')

      const { fullPath } = this.$route

      this.$nextTick(() => {
        this.$router.replace({
          path: '/redirect' + fullPath
        })
      })
    }
  }

}
</script>
<style lang="scss">
.sizechange.el-popper {
  min-width: 50px;
  text-align: center;
  overflow: hidden;
}
.sizechange .el-dropdown-menu__item{
  padding: 0
}
</style>
<style scoped>

.mlpx{
  margin-left: 4px;
}
</style>
